{extend name="extra@admin/content"}

{block name="content"}
<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="__SELF__" data-auto="true" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">门店名称</label>
        <div class="layui-input-block">
            <input name="title" value='{$store.title|default=""}'
                   required="required" title="请输入门店名称" placeholder="请输入门店名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">门店地址</label>
        <div class="layui-input-block">
            <input name="address" value='{$store.address|default=""}'
                   required="required" title="请输入门店地址" placeholder="请输入门店地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">达达编号</label>
        <div class="layui-input-block">
            <input name="dada" value='{$store.dada|default=""}'
                   required="required" title="请输入达达编号" placeholder="请输入达达编号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">门店照片</label>

        {if $store.logo}
            <div class="uploadimage" data-tips-image="{$store.logo}"
             style="background-image: url(&quot;{$store.logo}&quot;);"><input type="hidden" name="logo" data-md5="21fb6b5a3c9b8152abaa368860709d0c" value="{$store.logo|default=''}"></div>
        {else/}
        <div class="uploadimage"><input type="hidden" name="logo"/></div>
        {/if}

        <a data-file="one" data-field="logo" data-type="png,jpg" data-uptype="qiniu" href="javascript:void(0)"
           class="uploadbutton">上传图片</a>
        <script>
            require(['jquery'], function () {
                $('[name="logo"]').on('change', function () {
                    $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
                });
            });
        </script>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">门店相册</label>
        <style>
            .upload-option-button {
                float: right;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                display: none
            }

            .upload-option-button:hover {
                text-decoration: none;
                color: #fff
            }

            .uploadimagemtl:hover a {
                display: inline-block
            }
        </style>

        {if !empty($store.logo)}
        {volist name='images' id='vo'}
        {if $vo}
        <div class="uploadimage transition uploadimagemtl" data-tips-image="{$vo}" style="background-image: url(&quot;{$vo}&quot;);">
            <a href="javascript:void(0)" onclick="shanchu(this)" data-pic="{$vo}" class="layui-icon upload-option-button">&#x1006;</a>
        </div>
        {/if}
        {/volist}
        {/if}

        <input type='hidden' name='images' value="{$store.images}"/>

        <a data-file="mut" data-field="images" data-type="png,jpg" data-uptype="qiniu" href="javascript:void(0)">上传图片</a>

        <script type="text/javascript">
            require(['jquery'], function () {
                var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
                $('[name="images"]').on('change', function () {
                    var input = this, values = [], srcs = this.value.split('|');
                    $(this).prevAll('.uploadimage').map(function () {
                        values.push($(this).attr('data-tips-image'));
                    }), $(this).prevAll('.uploadimage').remove();
                    values.reverse();
                    for (var i in srcs) {
                        values.push(srcs[i]);
                    }
                    this.value = values.join('|');
                    for (var i in values) {
                        var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
                        $tpl.data('input', input).data('srcs', values).data('index', i);
                        $tpl.on('click', 'a', function (e) {
                            e.stopPropagation();
                            var $cur = $(this).parent();
                            $.msg.confirm('确定要移除这张图片吗？', function () {
                                var data = $cur.data('srcs');
                                delete data[$cur.data('index')];
                                $cur.data('input').value = data.join('|');
                                $cur.remove();
                            });
                        });
                        $(this).before($tpl);
                    }
                });
            });
        </script>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">门店简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入们店简介不超过100个字符" title="请输入门店简介" class="layui-textarea" name="description">{$store.description|default=""}</textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">门店详情</label>
        <div class="layui-input-block">
            <textarea name="detail">{$store.detail}</textarea>
            <script type="text/javascript">
                require(['ckeditor'], function () {
                    var editor = window.createEditor('[name="detail"]');
                    // 设置内容
//                    editor.setData('默认信息');
                    // 获取内容
                    var content = editor.getData();
//                    console.log(content);
                });
            </script>
            <script>
                layui.use('code', function () {
                    layui.code({encode: true});
                });
            </script>
        </div>
    </div>


    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        {if isset($store['id'])}<input type='hidden' value='{$store.id}' name='id'/>{/if}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
    <script>window.form.render();
        /**
         *  删除图集中的图片
         * @param obj
         */
        function shanchu(obj){
            $.msg.confirm('确定要移除这张图片吗？', function () {
                var pic = $(obj).attr('data-pic');      //删除的图片
                var id = $('input[name=id]').val();
                console.log(pic);

                var images = $('input[name=images]').val();
                var arr = images.split('|');
                var index = $.inArray(pic,arr);
                arr.splice(index,1);
                var va= arr.join('|');
                $.post("{:url('del_images')}",
                    {id:id,images:va},
                    function(data){
                        if(data.code == 1){
                            $('input[name=images]').val(va);
                            $(obj).parent().remove();
                        }else{
                            layer.msg('删除失败',function(){
                                // $('#create').empty();       //清空元素内部元素
                            });
                        }
                    }

                );
            });
        }
    </script>
</form>
{/block}